<script setup lang="ts">
import { useGameStore } from "@/stores/Game";
import { storeToRefs } from "pinia";
import { ref, watch } from "vue-demi";

// 仓库
const gameStore = useGameStore();

let { user } = gameStore;

// 多少吧升级
let time = ref(0);

// 还差多少经验升级
let fewExperience = 0;

// 一把多少经验
let timerExperience = Number(window.localStorage.getItem("timerExperience"));
if (timerExperience < 1) {
  timerExperience = 100;
}

setTimeout(() => {
  fewExperience = user.xpUntilNextLevel - user.xpSinceLastLevel;
  time.value = Math.ceil(fewExperience / timerExperience);
}, 1000);

watch(
  () => user.xpSinceLastLevel,
  (newVal, oldVal) => {
    if (newVal - oldVal > 0 && oldVal !== 0) {
      fewExperience = user.xpUntilNextLevel - user.xpSinceLastLevel;
      timerExperience = newVal - oldVal;
      window.localStorage.setItem("timerExperience", `${timerExperience}`);

      if (Math.ceil(fewExperience / timerExperience) > -1) {
        time.value = Math.ceil(fewExperience / timerExperience);
      }
    }
  }
);
</script>

<template>
  <el-card class="header">
    <div>
      经验：{{ user.xpSinceLastLevel + " / " + user.xpUntilNextLevel }} 
    </div>
    <div>还差
      {{ time }} 局升级 </div>
    <div>上局经验 {{timerExperience}}</div>
  </el-card>
</template>

<style scoped lang="less">
.header {
  width: 90%;
  margin: 0 5%;
}

div {
  margin-bottom: 5px;
}
</style>
